<style>
    .bg {
        background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
        background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
        background-attachment: fixed;
        overflow: hidden;
        height: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    @keyframes rotate {
        0% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
        }

        100% {
            transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
        }
    }

    .stars {
        transform: perspective(500px);
        transform-style: preserve-3d;
        position: fixed;
        bottom: 0;
        perspective-origin: 50% 100%;
        left: 50%;
        animation: rotate 90s infinite linear;
    }

    .star {
        width: 2px;
        height: 2px;
        background: #F7F7B6;
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0 0 -300px;
        transform: translate3d(0, 0, -300px);
        backface-visibility: hidden;
    }

    #VIEW-login {
        background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #75517d, #1b2947);
        background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
        background-attachment: fixed;
        overflow: hidden;
        height: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #VIEW-login .layui-logo {
        user-select: none;
        overflow: hidden;
        position: static;
        font-size: 30px;
        color: #d6e0f6;
        width: 100%;
        padding: 0;
        line-height: 120px;
        height: 120px;
        color: #3491ff;
        /* font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; */
        transition: height .8s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    #VIEW-login .layui-logo span {
        font-weight: normal;
        color: #fff;
        border-bottom: 1px solid #3491ff;
    }

    #VIEW-login .layui-logo span b {
        color: #3491ff;
    }

    #VIEW-login .login-wrap {
        position: relative;
        top: 50%;
        margin-top: -290px;
        height: 540px;
    }

    #VIEW-login .layui-form {
        overflow: hidden;
        background: #fff;
        padding: 45px;
        padding-bottom: 20px;
        border-radius: 0px;
        box-shadow: 0 0 30px #CCC;
        position: relative;
        border-radius: 20px;
        filter: alpha(opacity:50);
        opacity: 0.8;
    }

    #VIEW-login .layui-form-item {
        position: relative;
    }

    #VIEW-login .layui-input {
        text-indent: 26px;
    }

    #VIEW-login .codeimg {
        width: 110px;
        margin-left: 10px;
        cursor: pointer;
    }

    #VIEW-login .sendsms {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 100px;
        border: none;
    }

    #VIEW-login .sendsms.layui-btn-disabled {
        background: #f4f4f4;
        color: #bbb;
    }

    #VIEW-login .houseimg {
        text-align: center;
    }

    #VIEW-login .houseimg img {
        display: inline-block;
        margin-top: 5%;
    }

    #VIEW-login .layui-form-item .label-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 38px;
        line-height: 38px;
        text-align: center;
        color: #d2d2d2 !important;
    }

    .logo {
        font-size: 40px;
        font-weigh: bolder;
        background-image: -webkit-gradient(linear, left 0, right 0, from(rgb(166, 4, 249)), to(rgb(251, 223, 11)));
        /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-background-clip: text;
        /*text-fill-color会覆盖color所定义的字体颜色： */
        -webkit-text-fill-color: transparent;
    }
</style>
<div class="stars"></div>
<div id="VIEW-login" lay-title="登录">
    <div class="login-wrap">
        <div class="layui-container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 nepadmin-tc">
                    <div class="layui-logo logo">FCblog</div>
                </div>
                <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4">
                    <div class="layui-form" lay-filter="login-form">
                        <div class="normal-login-form">
                            <div class="layui-form-item">
                                <label class="layui-icon label-icon layui-icon-username"></label>
                                <input type="text" name="email" value="" lay-verify="email"
                                    lay-verType="tips" placeholder="登录邮箱" maxlength="30" autocomplete="off"
                                    class="layui-input">
                            </div>
                            <div class="layui-form-item password-block">
                                <label class="layui-icon label-icon layui-icon-password"></label>
                                <input type="password" name="pass" value="" lay-verify="password"
                                    lay-verType="tips" placeholder="密码" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-item verify-block">
                                <div class="layui-row">
                                    <div class="layui-col-xs7">
                                        <label class="layui-icon label-icon layui-icon-vercode"></label>
                                        <input type="text" maxlength="4" name="vercode" lay-verify="imgCode" value=""
                                            lay-verType="tips" placeholder="图形验证码" class="layui-input"
                                            autocomplete="off">
                                    </div>
                                    <div class="layui-col-xs5">
                                        <img class="codeimg" src="" />
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit
                                    lay-filter="login-submit">
                                    <i style="display: none"
                                        class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                                    立即登录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['admin', 'helper', 'util', 'form', 'layer'], function (admin, helper, util, form, layer) {
        var $ = layui.jquery;
        var view = $('#VIEW-login');
        var viewImgVerify = view.find(".codeimg");
        viewImgVerify.attr('src', layui.api.captcha);
        $(".codeimg").click(function () {
            $(this)[0].src = layui.api.captcha + '?' + Math.random();
        })

        form.render();

        form.verify({
            password: function (value, el) {
                if (value.length < 6) return '登录密码不能少于 6 位';
            },
            imgCode: function (value) {
                if (value.length != 4) return '图形验证码错误';
            }
        })

        //提交登录表单
        form.on('submit(login-submit)', function (data) {
            var loading = $(this).find('.layui-icon');
            if (loading.is(":visible")) return;
            loading.show();
            admin.post({
                api: 'login',
                data: data.field,
                success: function (res) {
                    if (res.code != 0) {
                        layer.msg(res.msg);
                        return;
                    }
                    admin.login(res.data.token, {
                        user: res.data.user
                    }, false);
                    admin.navigate('/');
                },
                complete: function () {
                    loading.hide();
                }
            });
            return false;
        })

        var stars = 500; /*星星的密集程度，数字越大越多*/

        var $stars = $(".stars");

        var r = 900; /*星星的看起来的距离,值越大越远,可自行调制到自己满意的样子*/

        for (var i = 0; i < stars; i++) {
            var $star = $("<div/>").addClass("star");
            $stars.append($star);
        }
        $(".star").each(function () {
            var cur = $(this);
            var s = 0.2 + (Math.random() * 1);
            var curR = r + (Math.random() * 300);
            cur.css({
                transformOrigin: "0 0 " + curR + "px",
                transform: " translate3d(0,0,-" + curR + "px) rotateY(" + (Math.random() *
                        360) + "deg) rotateX(" + (Math.random() * -50) + "deg) scale(" + s +
                    "," +
                    s + ")"

            })
        })
    })
</script>